<template>
	<view class="my-order">
		<view class="header" id="header">
			<view class="search">
				<!-- 	<fui-search-bar placeholder="搜索故障描述，报修电话/科室/人" @search="changeSearch" :cancel="false">
				</fui-search-bar> -->
				<custom-search-input @search="changeSearch" placeholder="搜索故障描述，报修电话/科室/人"></custom-search-input>
			</view>
			<view class="fui-filter__bar">
				<custom-dropdown v-model:dropdownMenu="droup" @confirm="confirmDrop" @reset="onReset">
				</custom-dropdown>

			</view>

		</view>
		<view class="body">
			<mescroll-uni :height="bodyHeight+'rpx'" @init="mescrollInit" :down="downOption" @down="downCallback"
				@up="upCallback">
				<template v-for="item in dataList">
					<custom-work-order-state-wrapper-card :state="item.degree"
						v-if="item.degree == 1 || item.degree ==2" class="m-t-32">
						<custom-work-order-card :itemData="item" @click="onCard(item,'myOrder')">
							<template #footer>

								<view class="button-wrapper">
									<template v-for="subItem in myOrderButton[item.currState]">
										<fui-button @click="onButton(item,subItem)" btnSize="mini"
											:background="subItem.background" :color="subItem.color" class="btn">

											{{subItem.label}}
										</fui-button>

									</template>
								</view>

							</template>

						</custom-work-order-card>
					</custom-work-order-state-wrapper-card>
					<custom-work-order-card v-else :itemData="item" @click="onCard(item,'myOrder')" class="m-t-32">
						<template #footer>

							<view class="button-wrapper">
								<template v-for="subItem in myOrderButton[item.currState]">
									<fui-button @click="onButton(item,subItem)" btnSize="mini"
										:background="subItem.background" :color="subItem.color" class="btn">

										{{subItem.label}}
									</fui-button>

								</template>
							</view>

						</template>


					</custom-work-order-card>

				</template>


			</mescroll-uni>


		</view>
	</view>

	<!-- 	<t-dialog
	    visible="{{visible}}"
	    title="{{dialogInfo.title}}"
	    content="{{dialogInfo.content}}"
	    confirm-btn="确定"
	    cancel-btn="取消"
	    bind:confirm="onDialogButtonConfirm"
	    bind:cancel="onDialogButtonCancel"
	></t-dialog> -->

</template>

<script>
	import {
		WorkOrderMyIndexApi
	} from "../../api/workOrder"
	import {
		getDicValue,
		getElHeightRpx,
		pullValue,
		queryParams
	} from "../../utils/util"
	import {
		DIC_KEY
	} from '@/config/dicKey-config.js'
	import {
		useSyStemStore
	} from "../../store/modules/system"
	import {
		mapState,
		mapActions,
		mapGetters
	} from 'pinia'

	import {
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import {
		SubPages
	} from "../../config/router-config"
	import {
		useHandleWorkOrder
	} from "../../store/modules/handleWorkOrder"
	const {
		mescrollInit,
		downCallback,
		getMescroll,
	} = useMescroll(onPageScroll, onReachBottom)
	export default {
		name: 'MyWorkOrderIndex',
		computed: {
			...mapState(useSyStemStore, ['dicList', 'viewHeight']),
			...mapGetters(useHandleWorkOrder, ['myOrderButton']),
			droup() {
				return [{
					title: '排序',
					type: 'cell',
					prop: 'sort',
					showIcon: true,
					options: [{
						value: 1,
						label: '综合排序'
					}, {
						value: 2,
						label: '紧急程度优先'
					}, {
						value: 3,
						label: '报修时间优先'
					}, {
						value: 4,
						label: '处理时间优先'
					}, {
						value: 5,
						label: '影响范围优先'
					}],

				}, {
					title: '筛选',
					type: 'filter',
					prop: 'filter',
					options: [{
							// 待接单 1处理中 2待审核 0审核未通过 0待评价 0已暂停 0已终止 0已完成 0
							title: '工单状态',
							type: 'checkbox',
							prop: "currState",
							options: [{
									value: null,
									label: '全部'
								},
								{
									value: 'wait_accept',
									label: '待接单'
								},
								{
									value: 'processing',
									label: '处理中'
								},
								{
									value: 'wait_audit',
									label: '待审核'
								},
								{
									value: 'not_pass_audit',
									label: '审核未通过'
								},
								{
									value: 'wait_appraisal',
									label: '待评价'
								},
								{
									value: 'suspended',
									label: '已暂停'
								},
								{
									value: 'terminated',
									label: '已终止'
								},
								{
									value: 'ended',
									label: '已完成'
								},
							],

						},
						{
							title: '响应类型',
							type: 'checkbox',
							prop: 'responseType',
							options: getDicValue(this.dicList, DIC_KEY.obs_fault_response),
						},
						{
							title: '紧急程度',
							type: 'checkbox',
							prop: 'degree',
							options: getDicValue(this.dicList, DIC_KEY.obs_fault_degree),
						},
						{
							title: '影响范围',
							type: 'checkbox',
							prop: 'rangeType',
							options: getDicValue(this.dicList, DIC_KEY.obs_fault_range),
						},

					],
				}, ]
			}
		},
		data() {
			return {
				itemData: null,
				bodyHeight: 0,
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				queryData: {
					pageSize: 10,
					pageNum: 1,
					// 状态
					currStateList: [],
					// 紧急程度
					degreeList: [],
					// 关键字(故障描述/报修电话/报修科室/报修人)
					keywords: '',
					// 影响范围
					rangeTypeList: [],
					// 处理类型
					responseTypeList: [],
					// 排序：1综合;2紧急;3报修时间;4处理时间;5影响范围
					sort: 1,
				},
				dataList: [],
				meScroll: null,
			}
		},
		onReady() {
			this.styleInit()
		},
		onLoad() {
			// this.meScroll.resetUpScroll()
		},
		onShow() {},
		methods: {
			mescrollInit,
			...mapActions(useHandleWorkOrder, ['onButton', 'setMescroll', 'onCard']),
			// 初始化样式
			styleInit() {
				const the = this
				getElHeightRpx('#header', (height) => {
					this.bodyHeight = the.viewHeight - height

				})
			},
			async downCallback(mescroll) {
				this.meScroll.resetUpScroll()
			},

			onReset() {
				console.log('sssss');

			},

			/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
			async upCallback(mescroll) {
				try {
					if (!this.meScroll) {
						this.meScroll = mescroll
						this.setMescroll(mescroll)
					}
					this.queryData.pageNum = mescroll.num;
					this.queryData.pageSize = mescroll.size
					const res = await WorkOrderMyIndexApi.getlist(this.queryData)
					if (mescroll.num == 1) {
						this.dataList = []; // 第一页需手动制空列表
					}
					const curPageData = res.data.rows || []
					this.dataList = this.dataList.concat(res.data.rows)
					mescroll.endBySize(curPageData.length, res.data.total); //必传参数(当前页的数据个数, 总数据量)
				} catch (err) {
					console.error(err);
					mescroll.endErr()
				}

			},
			confirmDrop(data) {
				console.log(data);

				if (data?.filter) {
					const {
						currState,
						responseType,
						degree,
						rangeType
					} = data.filter
					this.queryData.currStateList = currState.length === 1 && currState[0] == null ? [] : currState || null
					this.queryData.responseTypeList = responseType || null
					this.queryData.degreeList = degree || null
					this.queryData.rangeTypeList = rangeType || null
				}
				if (data?.sort) {
					this.queryData.sort = data.sort || null
				}


				this.meScroll.resetUpScroll()

			},
			changeSearch(e) {
				this.queryData.keywords = e.detail.value
				this.meScroll.resetUpScroll()
			},



		}
	}
</script>

<style lang="scss" scoped>
	.my-order {
		display: flex;
		flex-direction: column;

		.header {
			background-color: #fff;
			z-index: 99;
		}

		.body {
			flex: 1;
			overflow: hidden;
			padding: 0 32rpx;
		}
	}

	.fui-filter__bar {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		// margin-bottom: 40rpx;
	}

	.button-wrapper {
		margin-top: 48rpx;
		display: flex;
		justify-content: flex-end;
	}

	.btn {
		&+& {
			margin-left: 16rpx !important;
		}
	}
</style>